<template>
	<view>
		<!-- 用户信息部分 -->
		<view class="user">
			<div class="userImg" @click="person">
				<image src="../../static/s19.jpg" mode="scaleToFill" class='Img'></image>
			</div>
			<div class="username">
				<text class="name">孤使徒行</text>
			</div>
			<div class="vipbox">
				<div>个性签名：</div>
			</div>
			<div class="setting">
				<image src="../../static/setting.png" class="settingImg" @click="Setting" mode="scaleToFill"></image>
			</div>
		</view>

		<!-- 订单部分 -->
		<view class="order">
			<h4>我的订单</h4>
			<div class="orderbox">
				<div class="boxs">
					<image src="../../static/待付款.png" mode=""></image>
					<div class="ordertext">待付款</div>
				</div>
				<div class="boxs">
					<image src="../../static/待收货.png" mode=""></image>
					<div class="ordertext">待收货</div>
				</div>
				<div class="boxs">
					<image src="../../static/待评价.png" mode=""></image>
					<div class="ordertext">待评价</div>
				</div>
				<div class="boxs">
					<image src="../../static/售后.png" mode=""></image>
					<div class="ordertext">找售后</div>
				</div>
			</div>
		</view>

		<!-- 其他功能的补充 -->
		<view class="record">
			<div class="cord">
				<div class="cordtext">2</div>
				<div class="text">优惠劵</div>
			</div>
			<div class="cord">
				<div class="cordtext">0</div>
				<div class="text">商品</div>
			</div>
			<div class="cord">
				<div class="cordtext">1</div>
				<div class="text">店铺关注</div>
			</div>
			<div class="cord">
				<div class="cordtext">15</div>
				<div class="text">浏览记录</div>
			</div>
		</view>
		<view class="column">
			<div class="cord">
				<div class="cordtext">72.3<text class="tet">待领</text></div>
				<div class="text">白条</div>
			</div>
			<div class="cord">
				<div class="cordtext">4000</div>
				<div class="text">金条借款</div>
			</div>
			<div class="cord">
				<div class="cordtext">1<text class="tet">张</text></div>
				<div class="text">银行卡</div>
			</div>
			<div class="cord">
				<div class="cordtext"><text class="tet">攒</text>6<text class="tet">笔</text></div>
				<div class="text">小金库</div>
			</div>
		</view>

		<!-- 登录和退出登录按钮 -->
		<view class="loginbox" @click="Login">
			<div class="login">
				登录
			</div>
		</view>

		<view class="exitbox" @click="showModal">
			<div class="login">
				退出登录
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// isPopupVisible: false,
				// showDetails: false,
				// userInfo: {},
				// defaultAvatar: '/static/s19.jpg',

				// cdnUrl: getApp().globalData.cdnUrl + 'static/img-my/userpicter.png',
				// avatar: '',
				// nickname: '',
				// username: '',
				// examinationTypeArray: ['男', '女'],
				// examinationTypeIndex: 0,
				// examinationTypeArrayType: '',
				// phone: '',
				// number: 2,
				// flag: false

			}
		},
		onLoad() {
			// this.getUserinfo()
		},
		methods: {
			Setting() {
				uni.navigateTo({
					url: "../../setting/setting/setting"
				})
			},
			Login() {
				uni.navigateTo({
					url: "../../login/login"
				})
			},
			person() {
				uni.navigateTo({
					url: "../../person/person"
				})
			},
			showModal() {
				uni.showModal({
					title: '提示',
					content: '您确认要退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: "../../login/login"
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
	.user {
		width: 100%;
		height: 130px;
		/* background-image:url(../../static/images/bg.png); */
		background-size: cover;
		position: relative;
	}

	.userImg {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		position: absolute;
		top: 10px;
		left: 15px;

	}

	.userImg .Img {
		width: 100%;
		height: 100%;
		background-size: cover;
		/* 处理图片变模糊(使用了某些图像算法)*/
		image-rendering: -webkit-optimize-contrast;
		/* border-radius:50%; */
		border-radius: 20px;
	}

	.username {
		position: absolute;
		top: 30px;
		left: 130px;
	}

	.name {
		font-size: 24px;
		font-family: "华文行楷";
	}

	.setting {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.settingImg {
		width: 25px;
		height: 25px;
	}

	.vipbox {
		position: absolute;
		top: 70px;
		left: 130px;
		font-size: 10px;
		margin-top: 5px;
		font-size: 18px;
		font-family: "华文行楷";
	}

	.member {
		background-color: gold;
		padding: 3px 20px;
		border-radius: 20px;
		margin-right: 10px;
	}

	.gift {
		background-color: gold;
		padding: 3px 20px;
		border-radius: 20px;
	}

	.order {
		border: 1px solid #27ba9b;
		/* box-shadow: 5px 5px 5px #888888; */
		padding: 0px 10px;
		/* border-radius: 10px; */
		margin: 20px 0px;
	
	}

	.boxs {
		/* width:100%; */
		vertical-align: middle;
	}

	.order h4 {
		display: inline-block;
		margin: 10px 0px;

	}

	.orderbox {
		display: flex;
		justify-content: space-around;
		height: 60px;
		vertical-align: middle;
		/* margin-top:30px; */
	}

	.orderbox image {
		width: 35px;
		height: 35px;
		vertical-align: middle;
		margin-left: 5px;
	}

	.ordertext {
		font-size: 14px;
		vertical-align: middle;
		text-align: center;
	}

	.record {
		display: flex;
		justify-content: space-around;
		border: 1px solid #27ba9b;
		/* box-shadow: 5px 5px 5px #888888; */
		/* border-radius: 15px; */
		margin-top: 30px;
		padding: 5px 0;

	}

	.cordtext {
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 5px;
	}

	.cord .text {
		font-size: 15px;
		text-align: center;
	}

	.column {
		display: flex;
		justify-content: space-around;
		border: 1px solid #27ba9b;
		/* box-shadow: 5px 5px 5px #888888; */
		/* border-radius: 15px; */
		margin-top: 20px;
		padding: 5px 0;
	}

	.tet {
		font-size: 12px;
		font-weight: 100;
	}

	.exitbox {
		/* background-color:red; */
		border: 1px solid red;
		padding: 10px;
		margin: 0px 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
		border-radius: 10px;

	}

	.loginbox {
		/* background-color:red; */
		border: 1px solid #27ba9b;
		padding: 10px;
		margin: 0px 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40px;
		border-radius: 10px;

	}
</style>